<template>
	<div class="businessFollow">
		<smpPanel>
				<el-form :inline="false" label-width="120px" size="mini" ref="form" :model="form">
					
					<el-row>
								<el-col :span="6">
									<el-form-item label="服务编码(P值):" >
										<el-input v-model="query.body.pubSrvCode"></el-input>
									</el-form-item>
								</el-col> 
								
								<!-- <el-col :span="6">
									<el-form-item label="服务编码(R值):" >
										<el-input v-model="query.body.regSrvCode"></el-input>
									</el-form-item>
								</el-col> -->
								
								<el-col :span="6">
									<el-form-item label="请求系统:" >
										<el-select v-model="query.body.pubSysCode" style="width: 100%" clearable filterable remote reserve-keyword :remote-method="getsystems"
											placeholder="请输入系统编号或名称" >
											<el-option v-for="item in systemList" :key="item.systemNo" :label="item.systemName"
												:value="item.systemNo">
												{{ item.systemName }}({{item.systemNo}})
												<!-- <span style="float: left;margin-left: 3px;">{{ item.systemNo }}</span>
												<span style="float: right;margin-right: 3px;">{{ item.systemName }}</span> -->
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								
								<el-col :span="6">
								
										<el-form-item label="服务系统:" >
											<el-select v-model="query.body.regSysCode" style="width: 100%" clearable filterable remote reserve-keyword :remote-method="getsystems"
												placeholder="请输入系统编号或名称" >
												<el-option v-for="item in systemList" :key="item.systemNo" :label="item.systemName"
													:value="item.systemNo">
													{{ item.systemName }}({{item.systemNo}})
													<!-- <span style="float: left;margin-left: 3px;">{{ item.systemNo }}</span>
													<span style="float: right;margin-right: 3px;">{{ item.systemName }}</span> -->
												</el-option>
											</el-select>
										</el-form-item>
								</el-col>
								
								<el-col :span="6">
									<el-form-item label="渠道机构:" >
										<el-input v-model="query.body.orgCode"></el-input>
									</el-form-item>
								</el-col>
								
								<el-col :span="6">
									<el-form-item label="交易码:" >
										<el-input v-model="query.body.transcode"></el-input>
									</el-form-item>
								</el-col>
								
								<el-col :span="6">
									<el-form-item label="全局流水号:" >
										<el-input v-model="query.body.globalSeq"></el-input>
									</el-form-item>
								</el-col>
								
								<el-col :span="6">
									<el-form-item label="处理状态:" >
										<el-select v-model="query.body.status" style="width: 100%" placeholder="处理状态"  clearable>
											<el-option v-for="item in dict('SMP0022')" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								
								<el-col :span="6">
									<el-form-item label="测试环境:" >
										<el-select v-model="query.body.testEnvir" style="width: 100%" placeholder="测试环境" >
											<el-option v-for="item in dict('SMP0032')" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								
								<el-col :span="6">
									<el-form-item label="统计时间(开始):" prop="logDate">
										<el-date-picker type="datetime"  style="width: 100%" v-model="query.body.logDateStart" placeholder="选择时间" :clearable="false" value-format="yyyy-MM-dd HH:mm:ss">
										</el-date-picker>
									</el-form-item>
								</el-col>
								
								<el-col :span="6">
									<el-form-item label="统计时间(结束):" prop="logDate">
										<el-date-picker  type="datetime" style="width: 100%" v-model="query.body.logDateEnd" placeholder="选择时间" value-format="yyyy-MM-dd HH:mm:ss">
										</el-date-picker>
									</el-form-item>
								</el-col>
								<el-col :span="6" :offset="6" >
										<searchButtonGroup  @search="onSubmit" @reset="reset" online  />
								</el-col>
								
					</el-row>
				</el-form>
		</smpPanel>
	
<smpPanel title="交易列表">
				<el-table :data="list" size="mini" stripe   style="width: 100%">
					<el-table-column prop="globalSeq" label="全局流水号"  align="center" width="200"/>
					<el-table-column prop="transcode" label="交易码"  align="center" />
					<el-table-column prop="orgCode" label="渠道机构"  align="center" />
					<el-table-column prop="status" label="状态" align="center" width="80">
						 <template slot-scope="scope">
							{{scope.row.status|dictName("SMP0022")}}
						</template> 
					</el-table-column>
					<!-- <el-table-column prop="seqBusiEntity" label="所属系统"  align="center" width="80"/> -->
					<el-table-column prop="pubSrvCode" label="服务编码(P值)"  align="center" />
					<el-table-column prop="regSrvCode" label="服务编码(R值)"  align="center" />
					<el-table-column prop="pubSysCode" label="请求系统"  align="center" show-overflow-tooltip>
					
					
					<template slot-scope="scope">
						{{scope.row.pubSysCode|getSystemName}}({{scope.row.pubSysCode}})
					</template>
					</el-table-column>
					<el-table-column prop="regSysCode" label="服务系统"  align="center" show-overflow-tooltip>
					<template slot-scope="scope">
						{{scope.row.regSysCode|getSystemName}}({{scope.row.regSysCode}})
					</template>
					</el-table-column>
					<el-table-column prop="logDate" label="统计时间"  align="center" width="170" />
					
					<el-table-column  label="操作"
					      align="center" >
						<template slot-scope="scope">
						       <el-link 
						         size="mini"
								 type="primary"
								 :underline="false"
								 style="font-size: 12px;"
						         @click="followEdit(scope.$index, scope.row)">交易详情</el-link>
								<!-- <el-link
								  size="mini"
															 type="primary"
															 :underline="false"
															 style="font-size: 12px;"
								  @click="handleDelete(scope.$index, scope.row)">删除</el-link> -->
						     </template>  
					</el-table-column>
					
				</el-table>
				<div class="smp-pagination" v-show="total>0">
					<el-pagination background size="medium" layout="total,sizes,prev, pager, next,jumper" :page-size="query.pageSize" :page-sizes="[5,10,15,20]" :total="total" :current-page="query.pageNum" @current-change = "currentChange" @size-change="sizeChange">
					</el-pagination>
				</div>
			</smpPanel>
		<!-- <add ref="add" @onSubmit="onSubmit"/>
		<edit ref="edit" @onSubmit="onSubmit"/> -->
		<!-- <followDetails ref="followDetails" /> -->
		
		
	</div>
</template>

<script>
	"use strict";
	import {getBusinessFollowByPage} from '@/api/environment.js';
	// import followDetails from './followDetails.vue'
	export default {
		
		components:{
			// followDetails
		},
		data() {
			return {
				total:0,
					title: '运行环境',
					expand: false,
					columns: [
						{
							title: '序号',
							dataIndex: 'id',
							align: 'center'
						},
						{
							title: '所属系统',
							dataIndex: 'systemNo',
							align: 'center',
						},
						{
							title: '系统环境IP',
							dataIndex: 'addr',
							align: 'center'
						},
						{
							title: '系统环境端口',
							dataIndex: 'port',
							align: 'center'
						},
						{
							title:'系统环境url',
							dataIndex: 'url',
							align: 'center'
						},
						{
							title: 'ESB环境IP',
							dataIndex: 'esbaddr',
							align: 'center'
						},
						{
							title: '环境类型',
							dataIndex: 'envirType',
							align: 'center'
						},
						{
							title: '备注',
							dataIndex: 'remark',
							align: 'center'
						},
						{
							title: '系统负责人',
							dataIndex: 'systemResponsibleMan',
							align: 'center'
						},
						{
							title: '登记时间',
							dataIndex: 'createTime',
							align: 'center'
						}
					],
					list: [],
					
					query: {
						body:{
							pubSrvCode:'',
							regSrvCode:'',
							pubSysCode:'',
							regSysCode:'',
							orgCode:'',
							transcode:'',
							globalSeq:'',
							status:'',
							seqBusiEntity:'',
							logDateStart:'',
							logDateEnd:'',
							testEnvir:'01'
						},
						pageNum: 1,
						pageSize: 5
					},
			};
		},
		
		created() {
			Object.assign(this.query.body,this.$route.query);
			if(this.$route.query.pageNum!=undefined){
			this.query.pageNum =this.$route.query.pageNum;
			}
			if(this.$route.query.pageSize!=undefined){
			this.query.pageSize = parseInt(this.$route.query.pageSize);
			}
			
			/* this.query.pageNum = this.$route.query.pageNum;
			this.query.pageSize = this.$route.query.pageSize; */
			 if(this.$route.query.autoFlg =='1'){
				 this.getList();
			 }
			
			
			//alert(this.query.pageSize);
			//this.getList();
			
			if(this.query.body.logDateStart==''){
				
				this.query.body.logDateStart= this.formatDate(new Date(),'00:00:00');
			}
			
			
		},
		
		methods: {
			formatDate(date,time){
				let myyear = date.getFullYear();
				let myMonth = date.getMonth()+1;
				let myweekDay = date.getDate();
				return myyear+"-"+myMonth+"-"+myweekDay+" "+time;
			},
	
			onSubmit() {
				this.query.pageNum = 1;
				this.getList();
			},
			
			handleEdit(index,row){
				let row1 = {};
				Object.assign(row1,row);
				this.$refs.edit.showDialog(row1);
			},
			
			handleDelete(index,row){
				delEnvironmentInfo(row).then(response => {
					this.$message({
						duration:5000,
						type: 'success',
						message: '删除成功！'
					});
					this.getList();
					
				}).catch(error => {
					this.$message({
						duration:5000,					
						type: 'error',
						message: '删除失败！'
					});
					this.getList();
				});
			},
			
			add(){
				this.$refs.add.showDialog();
			},
			
			reset(form) {
				this.query.body = {
							pubSrvCode:'',
							regSrvCode:'',
							pubSysCode:'',
							regSysCode:'',
							orgCode:'',
							transcode:'',
							globalSeq:'',
							status:'',
							seqBusiEntity:'',
							logDateStart:'',
							logDateEnd:'',
							testEnvir:'01'
						},
						this.query.body.logDateStart= this.formatDate(new Date(),'00:00:00');
			},
			
			getList() {
				const loading = this.$loading({
					lock:true,
					text:'数据加载中，请稍后',
					spinner:'el-icon-loading',
					target:document.querySelector(".businessFollow")
				})
				getBusinessFollowByPage(this.query).then(response => {
					this.list = response.data.extend.list
					this.total = response.data.extend.total;
					loading.close();
					
					let query ={};
					Object.assign(query,this.query.body);
					query.pageNum = this.query.pageNum;
					query.pageSize = this.query.pageSize;
					query.autoFlg ="1";
					this.$router.push({query:query})
				}).catch(error => {
					loading.close();
					console.info("失败");
					console.info(error.message);
				});
			},
			
			currentChange(val){
				this.query.pageNum = val;
				this.getList();
			},
			sizeChange(val){
				this.query.pageSize = val;
				this.query.pageNum = 1;
				this.getList();
			},
			
			followEdit(index,row){
				
				this.$router.push({name: 'businessFollowDetails',query: row})
			},
			

		},
		
	
	}
</script>

<style>
	.environmentFooter{
		margin-bottom: 20px;
	}
	
	#environmentSpan{
		margin-left: 1320px;
	}
</style>